<template>
<div class="Costquery  h100" v-loading="loading">
  <div class="PageContent">
    <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
      <el-row :gutter="5"  class="fileSearch">
        <el-form-item label="业务编码:" >
          <el-input v-model="ruleForm.businessCode" ></el-input>
        </el-form-item>
        <el-form-item label="逝者姓名:" >
          <el-input v-model="ruleForm.deadName" ></el-input>
        </el-form-item>
        <el-form-item label="项目名称:" >
          <el-input v-model="ruleForm.itemName" ></el-input>
        </el-form-item>
        <el-form-item label="结算日期:" class="timew">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.settleTimeStart"   format="yyyy-MM-dd" ></el-date-picker>
          -
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.settleTimeEnd"   format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="费用时间:"  class="timew">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.chargeTimeStart"   format="yyyy-MM-dd" ></el-date-picker>
          -
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.chargeTimeEnd"   format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  v-if="btnRight.btnCostQuerySearch" @click="onSubmit('search')">查询</el-button>
          <el-button type="primary" plain v-if="btnRight.btnCostQueryExport" @click="openExecl">导出Excel</el-button>
        </el-form-item>
      </el-row>

      <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
        stripe
        :height="tableHeight"
        border>
        <el-table-column sortable align = 'center'  prop="businessCode"  label="业务编码"  width="200">
        </el-table-column>
        <el-table-column
          prop="deadName"
          align = 'center'
          label="逝者姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="itemName"
          align = 'center'
          label="项目名称"
          width="120">
        </el-table-column>

        <el-table-column
          prop="itemPrice"
          align = 'center'
          label="项目价格"
          width="100">
        </el-table-column>
        <el-table-column
          prop="itemNumber"
          align = 'center'
          label="项目数量"
          width="100">
        </el-table-column>

        <el-table-column
          prop="itemUnit"
          align = 'center'
          label="项目单位"
          width="100">
        </el-table-column>

        <el-table-column
          prop="itemCharge"
          align = 'center'
          label="项目金额"
          width="100">
        </el-table-column>

        <el-table-column
          prop="discountCharge"
          align = 'center'
          label="优惠金额"
          width="100">
        </el-table-column>

        <el-table-column
          prop="benefitCharge"
          align='center'
          label="减免金额"
          width="100">
        </el-table-column>

        <el-table-column
          prop="realityCharge"
          align = 'center'
          label="实际收费金额"
          width="120">
        </el-table-column>

        <el-table-column
          prop="chargeTime"
          align = 'center'
          label="费用时间"
          width="150">
        </el-table-column>

        <el-table-column
          prop="asSettledText"
          align = 'center'
          label="是否结算"
          width="100">
        </el-table-column>

        <el-table-column
          prop="settleBatchNo"
          align = 'center'
          label="结算批次编号"
          width="150">
        </el-table-column>

        <el-table-column
          prop="settleTime"
          align = 'center'
          label="结算日期"
          width="150">
        </el-table-column>

        <el-table-column
          prop="invoiceNo"
          align = 'center'
          label="发票号"
          width="200">
        </el-table-column>

        <el-table-column
          prop="receiptNo"
          align = 'center'
          label="收据号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="settleUserName"
          align = 'center'
          label="收款人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="remark"
          align = 'center'
          label="备注"
          width="100">
        </el-table-column>
      </el-table>
      <!-- <div style="text-align: center;
                  height: 0px;
                  line-height: 20px;
                  font-size: 18px;">
        显示{{pager.total===0?0:(Math.ceil(pager.total/pager.pageSize)>1?((pager.currentPage-1)*pager.pageSize+1):(1))}}到{{pager.total===0?0:((Math.ceil(pager.total/pager.pageSize)===pager.currentPage)?(pager.total):(pager.currentPage*pager.pageSize))}}条
      </div> -->
      <p style="text-align: right;margin-top: 20px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.currentPage"
          :page-size="pager.pageSize"
          :page-sizes="[10,20,30,50]"
          background
          layout="total,sizes,prev, pager, next, jumper"
          :total="pager.total">
        </el-pagination>
      </p>
    </el-form>
  </div>
</div>
</template>

<script>
  import * as Type from '@/api/service'
  import {dataFormatetmd} from '@/utils/index'
  import download from "@/api/download"
    export default {
        name: "Costquery",
      data(){
        return{
          loading:false,
          type:[],
          ruleForm: {
            "businessCode": "",
            "deadName": "",
            "itemName": "",
            "settleTimeStart": "",
            "settleTimeEnd": "",
            "chargeTimeStart": "",
            "chargeTimeEnd": "",
            "pageSize": 0,
            "currentPage": 0,
            "exportExcelFlag": 0,
            "orderField": "",
            "orderType": ""
          },
          pager:{
            "pageSize": 20,
            "total": 1,
            "currentPage": 1
          },
          tableData: [],
          tableHeight:0,
          //按钮权限
          btnRight: {
            btnCostQuerySearch: true, //查询
            btnCostQueryExport: true,//导出excel
          }
        }

      },//载入按钮
      mounted(){
        this.btnRight = this.$route.meta.buttons;
        //遍历属性赋值将true与false字符串转换成布尔型的值
        for (var key of Object.keys(this.btnRight)) {
          this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
        }
        this.defaultValue();
        this.onSubmit()
        var that=this
        window.onresize=function() {
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          that.tableHeight =dom - search - 110
        }
      },
      //注销window.onresize事件
      destroyed(){
        window.onresize = null;
      },
      updated(){
        this.$nextTick(()=>{
          var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
          var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
          this.tableHeight =dom - search - 110
        })
      },
      methods: {
        //默认初始值方法
        defaultValue() {
          //默认查询结算日期开始结束时间为当天
          this.ruleForm.settleTimeStart = dataFormatetmd(new Date());
          this.ruleForm.settleTimeEnd = dataFormatetmd(new Date());
          //默认查询费用时间开始结束时间为当天
          this.ruleForm.chargeTimeStart = dataFormatetmd(new Date());
          this.ruleForm.chargeTimeEnd = dataFormatetmd(new Date());
        },
        onSubmit(value) {
          this.loading = true
          if (value) {
            this.pager.currentPage = 1;
          }
          var postData = {
            "businessCode": this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "itemName": this.ruleForm.itemName,
            "settleTimeStart": dataFormatetmd(new Date(this.ruleForm.settleTimeStart)),
            "settleTimeEnd": dataFormatetmd(new Date(this.ruleForm.settleTimeEnd)),
            "chargeTimeStart": dataFormatetmd(new Date(this.ruleForm.chargeTimeStart)),
            "chargeTimeEnd": dataFormatetmd(new Date(this.ruleForm.chargeTimeEnd)),
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 0,            //0表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          //查询
          Type['loadChargeQuery'](postData).then(response => {
            const { data }=response;
            if (!data) {
              this.loading = false;
              this.$message('数据读取失败')
              return
            }
            this.tableData = data.list
            this.pager = data.pager
            this.loading = false
            //   //数据读取成功
          }).catch(error => {
            this.$message(error)
            this.loading = false
            this.tableData = []
          })
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pager.pageSize = size;
          this.onSubmit()
        },
        handleCurrentChange: function(currentPage){
          this.pager.currentPage = currentPage;
          this.onSubmit()  //点击第几页
        },
        openExecl(){
          // window.location.href = "excel地址"
          var postData = {
            "businessCode": this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "itemName": this.ruleForm.itemName,
            "settleTimeStart": dataFormatetmd(new Date(this.ruleForm.settleTimeStart)),
            "settleTimeEnd": dataFormatetmd(new Date(this.ruleForm.settleTimeEnd)),
            "chargeTimeStart": dataFormatetmd(new Date(this.ruleForm.chargeTimeStart)),
            "chargeTimeEnd": dataFormatetmd(new Date(this.ruleForm.chargeTimeEnd)),
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 1,            //0表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          download.exportExcel(Type["ChargeQueryEXPEXC"],postData,"费用查询_"+download.getDateTime()+".xlsx");
        },
      }
    }
</script>

<style scoped>

  .Costquery .PageContent .el-input,.Costquery  .PageContent .el-select
  {
    width:8vw;
    min-width: 150px;
  }

</style>
